<template>
	<div>
		<div class="publicpageview" id="publicpageview">
			<div style="text-align: center;font-weight: bold;margin-top: 20px;">非住宅房屋租金计算表</div>
		<!-- 	<div style="display:flex;margin-top: 10px;flex-flow: row wrap" v-if="topContet">
				<div style="margin-left: 30px;">建筑面积分摊系数：1.25</div>
				<div style="margin-left: 30px;">电梯：1000元/部</div>
				<div style="margin-left: 30px;">部     元</div>
			</div> -->
			<div style="display: flex;margin-top: 20px;box-sizing: border-box;">
				<div class="list4">间号</div>
				<div class="list4">使用面积</div>
				<div class="list4">计租面积</div>
				<div class="list4">用途</div>
				<div class="list98">租金类别</div>
				<div class="list4">地段等级</div>
				<div class="list4">房屋结构</div>
				<div class="list2">
					<div class="list6" style="width:280px">附加条件单价</div>
					<div style="display: flex;">
						<div class="list5">暖气</div>
						<div class="list10">超高</div>
					</div>
				</div>
				<div class="list4">单位租金</div>
				<div class="list2" style="width:210px">
					<div class="list6">减收租金</div>
					<div style="display: flex;">
						<div class="list5">净高</div>
						<div class="list5">埋深</div>
						<div class="list5">%)</div>
					</div>
				</div>
				<div class="list4">基本租金</div>
				<div class="list2" style="width:140px">
					<div class="list6">附加租金</div>
					<div style="display: flex;">
						<div class="list5">暖气</div>
						<div class="list5">超高</div>
					</div>
				</div>
				<div class="list4">租金定额</div>
				<div class="list4">变动日期</div>
				<!-- <div class="list4">备注</div> -->
			</div>
			<div style="display: flex;box-sizing: border-box;" v-for="(item,index) in list" :key="index">
				<div class="list8">{{item.roomNo}}</div>
				<div class="list8">{{item.usingArea}}</div>
				<div class="list8">{{item.rentArea}}</div>
				<div class="list8">{{item.use}}</div>
				<div class="list99">{{item.rentWay}}</div>
				<div class="list8">{{item.addressLevel}}</div>
				<div class="list8">{{item.structure}}</div>
				<div class="list3">{{item.heatUnitRent}}</div>
				<div class="list3">{{item.overHeight}}</div>
				<div class="list3">{{item.overHeightIncrease}}</div>
				<div class="list3">{{item.overHeightRent}}</div>
				<div class="list3">{{item.unitRentPrice}}</div>
				<div class="list3">{{item.height}}</div>
				<div class="list3">{{item.depth}}</div>
				<div class="list3">{{item.reducePercent}}</div>
				<div class="list3">{{item.basicRent}}</div>
				<div class="list3">{{item.heatRent}}</div>
				<div class="list3">{{item.overHeightRent}}</div>
				<div class="list3">{{item.rentPrice}}</div>
				<div class="list3">{{item.changeDate}}</div>
			</div>
		</div>

		<button style="margin: 10px auto 0;display: block;" @click="handleout">打印非住宅房屋租金计算表</button>
		
		<!-- <button style="margin: 10px auto 0;display: block;" v-print="printObj">打印附加租金分析表</button>
		<div id="loading" v-show="printLoading"></div> -->
	</div>
</template>

<script>
	import * as XLSX from 'xlsx'
	import dayjs from 'dayjs'
	import {
		houseAdminList,
		addRoom,
		roomDetails,
		updRoom,
		blockList,
		blockDetail
	} from '@/api/industry'
	export default {
		props: {
			blockobj: Object
		},
		name: 'zujintiaozhengguocheng',
		data() {
			return {
				printLoading: true,
				printObj: {
					id: "publicpageview",
					popTitle: '打印预览',
					extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css",
					beforeOpenCallback(vue) {
						console.log('打开之前')
					},
					openCallback(vue) {
						console.log('执行了打印')
					},
					closeCallback(vue) {
						console.log('关闭了打印工具')
					}
				},
				list: [],
				topContet: {},
				hejiObject: {
					fieldName3: 0,
					fieldName4: 0,
					fieldName5: 0,
					fieldName6: 0,
					fieldName7: 0,
					fieldName8: 0,
					fieldName9: 0,
					fieldName10: 0,
					fieldName11: 0,
					fieldName12: 0,
					fieldName13: 0
				}
			}
		},
		computed: {},
		mounted() {
			console.log(this.blockobj)
			this.list = this.blockobj.notHouse1
			// this.topContet = this.blockobj.exportTou
		},

		methods: {
			handleout() {
				this.$confirm('此操作将导出该条内容，请确认是否继续操作？', '导出提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
				.then(() => {
					let list = this.list
					let outList = []
					this.list.forEach((item, index) => {
						outList.push({
							间号: item.roomNo,
							使用面积: item.usingArea,
							计租面积:item.rentArea,
							用途:item.use,
							租金类别:item.rentWay,
							地段等级:item.addressLevel,
							房屋结构:item.structure,
							暖气:item.heatUnitRent,
							超高:item.overHeight,
							超高增加:item.overHeightIncrease,
							超高租金:item.overHeightRent,
							单位租金:item.unitRentPrice,
							净高:item.height,
							埋深:item.depth,
							'%)':item.reducePercent,
							基本租金:item.basicRent,
							暖气:item.heatRent,
							超高:item.overHeightRent,
							租金定额:item.rentPrice,
							变动日期:item.changeDate
						})
					})
					// 获取表格数据
					const data = outList
					// 转换数据为工作表
					const worksheet = XLSX.utils.json_to_sheet(data)
					// 创建新的工作簿
					const workbook = XLSX.utils.book_new()
					// 将工作表添加到工作簿
					XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
					// 导出Excel文件
					XLSX.writeFile(workbook, '非住宅房屋租金计算表.xlsx')
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消导出'
					})
				})
			}
		},
	}
</script>

<style scoped>
	.publicpageview {
		width: 1480px;
		height: auto;
		background-color: #fff;
		margin: 20px auto 0;
		overflow: hidden;
		box-sizing: border-box;
		padding: 20px 5px 20px;
		outline: 1px solid black;
	}

	.list1 {
		width: 100px;
		box-sizing: border-box;
		height: 30px;
		line-height: 30px;
		text-align: center;
		outline: 1px solid black;
	}

	.list2 {
		height: 40px;
		line-height: 30px;
		outline: 1px solid black;
		text-align: center;
		font-size: 12px;
	}

	.left {
		width: 25px;
		height: 360px;
		outline: 1px solid black;
		line-height: 180px;
		text-align: center;
		box-sizing: border-box;
	}

	.list3 {
		width: 70px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
		font-size: 12px
	}

	.list4 {
		font-size: 12px;
		width: 70px;
		height: 40px;
		line-height: 40px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
	.list8{
		font-size: 12px;
		width: 70px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
	.list99{
		font-size: 12px;
		width: 100px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
	
	.list98{
		font-size: 12px;
		width: 100px;
		height: 40px;
		line-height: 40px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list7 {
		font-size: 12px;
		width: 150px;
		height: 40px;
		line-height: 40px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
	
	.list9{
		font-size: 12px;
		width: 150px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list5 {
		font-size: 12px;
		width: 70px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list6 {
		font-size: 12px;
		width: 100%;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
	.list10{
		font-size: 12px;
		width: 210px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
</style>